<div class="container">
    <ul class="nav nav-tabs">
        <li class="active emp-nav"><a href="#employees-tab" data-toggle="tab">Employees</a></li>
        <li class="client-nav"><a href="#clients-tab" data-toggle="tab">Clients</a></li>
        <li class="supplier-nav"><a href="#supplier-tab" data-toggle="tab">Supplier</a></li>
    </ul>
    <div class="tab-content contacts-container">
        <!--Employees-->
        <div class="tab-pane active" id="employees-tab">
            <div class="container employee-filter">
                <div class="row">
                    <div class="col-md-6">
                        <div class="btn-group">
                            <a href="#new-emp-popup" role="button" data-toggle="modal" class="btn btn-primary">
                                <span class="glyphicon glyphicon-plus"></span> New Employee</a>
                            <a href="#" role="button" class="btn btn-primary btn-reset-emp-list">
                                <span class="glyphicon glyphicon-refresh"></span> Reset Table</a>
                        </div>
                    </div>
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-3">
                        <form class="form-inline" role="form">
                             <div class="input-group">
                                <input type="text" class="form-control" name="search_emp" placeholder="Search Employee...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <button class="btn btn-default btn-delete-emp hide-element" data-toggle="modal" data-target="#delete-emp-popup" title="Delete Emploee/s">
                <span class="glyphicon glyphicon-trash"></span> Delete
            </button>
            <div class="table-responsive">
                <table class="table table-bordered table-hover emp-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-emp"/></th>
                            <th style="width: 15%;">Employee Name</th>
                            <th style="width: 5%;">Gender</th>
                            <th>Address</th>
                            <th style="width: 20%;">Email</th>
                            <th style="width: 10%;">Contact No.</th>
                            <th style="width: 10%;">Date Employed</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if($employees === FALSE){?>
                        <?php }else{ ?>
                            <?php foreach ($employees as $item) { ?>
                            <tr>
                                <td><input type="checkbox" class="item-emp-checkbox" value="<?php echo $item['coordinator_id']?>"/></td>
                                <td><a href="#view-emp-popup" class="btn-view-emp text-emp-name" data-toggle="modal" data-empid="<?php echo $item['coordinator_id']?>">
                                    <?php echo $item['lname'].', '. $item['fname']?></a>
                                </td>  
                                <td class="text-emp-gender"><?php if($item['gender']=='0'){echo 'Male';}else{echo 'Female';}?></td>
                                <td class="text-emp-address"><?php echo $item['coord_address']?></td>
                                <td class="text-emp-email"><?php echo $item['coord_email']?></td>
                                <td class="text-emp-contact"><?php echo $item['coord_num']?></td>
                                <td class="text-emp-date"><?php echo $item['emp_date']?></td>
                            </tr>
                            <?php } ?>
                        <?php } ?>
                    </tbody>  
                </table>
                <?php if($employees === FALSE){?>
                    <div class="alert alert-info empty-content">Oops! You currently don't have any employee.</div>
                <?php } ?>
            </div>
            <!--New Employee Modal-->
            <div class="modal fade" id="new-emp-popup" tabindex="-1" role="dialog" aria-labelledby="new-emp" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="new-emp">New Employee</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="n-lname" class="control-label">Last Name</label>
                                    <input type="text" name="lname" class="form-control lname required" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="n-mname" class="control-label">Middle Name</label>
                                    <input type="text" name="lname" class="form-control mname required" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="n-fname" class="control-label">First Name</label>
                                    <input type="text" name="fname" class="form-control fname required" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="n-bday" class="control-label">Birthday</label>
                                    <input type="date" name="fname" class="form-control bday required" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Gender</label><br/>
                                    <div class="btn-group gender" data-toggle="buttons">
                                        <label class="btn btn-default active">
                                            <input type="radio" name="gender" value="0" checked>Male
                                        </label>
                                        <label class="btn btn-default">
                                            <input type="radio" name="gender" value="1">Female
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="n-date-emp" class="control-label">Date Employed</label>
                                    <input type="date" name="date-emp" class="form-control date-emp required" />
                                </div>
                            </div>
                            <div class="col-sm-12 address-container">
                                <label for="n-address" class="control-label">Address</label>
                                <a href="#" class="another-address">Add row</a>
                                <input type="text" class="form-control address-text address-1 required-info" name="address">
                            </div>
                            <div class="col-sm-12 email-container">
                                <label for="n-email" class="control-label">Email Address</label>
                                <a href="#" class="another-email">Add row</a>
                                <input type="text" class="form-control email-text email-1 required-info" name="email">
                            </div>
                            <div class="col-sm-12 contact-no-container">
                                <label for="n-contact-no" class="control-label">Contact No.</label>
                                <a href="#" class="another-contact-no">Add row</a>
                                <input type="text" class="form-control contact-no-text contact-no-1 required-info" name="contact-no">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-save">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--View Employee Modal-->
            <div class="modal fade" id="view-emp-popup" tabindex="-1" role="dialog" aria-labelledby="view-emp" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="view-emp">View Employee</h4>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="emp_id" id="emp-id" />
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="v-lname" class="control-label">Last Name</label>
                                    <input type="text" name="lname" class="form-control lname required" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="v-mname" class="control-label">Middle Name</label>
                                    <input type="text" name="lname" class="form-control mname required" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="v-fname" class="control-label">First Name</label>
                                    <input type="text" name="fname" class="form-control fname required" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="v-bday" class="control-label">Birthday</label>
                                    <input type="date" name="fname" class="form-control bday required" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Gender</label><br/>
                                    <div class="btn-group gender" data-toggle="buttons">
                                        <label class="btn btn-default">
                                            <input type="radio" name="gender" class="male" value="0" checked>Male
                                        </label>
                                        <label class="btn btn-default">
                                            <input type="radio" name="gender" class="female" value="1">Female
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="v-date-emp" class="control-label">Date Employed</label>
                                    <input type="date" name="date-emp" class="form-control date-emp required" />
                                </div>
                            </div>
                            <div class="col-sm-12 address-container">
                                <label for="v-address" class="control-label">Address</label>
                                <a href="#" class="another-address">Add row</a>
                            </div>
                            <div class="col-sm-12 email-container">
                                <label for="v-email" class="control-label">Email Address</label>
                                <a href="#" class="another-email">Add row</a>
                            </div>
                            <div class="col-sm-12 contact-no-container">
                                <label for="v-contact-no" class="control-label">Contact No.</label>
                                <a href="#" class="another-contact-no">Add row</a>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-update">Update</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Delete File Modal-->
            <div class="modal fade" id="delete-emp-popup" tabindex="-1" role="dialog" aria-labelledby="delete-emp" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-emp">Delete Employee/s</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
        </div>
        <!--Client-->
        <div class="tab-pane" id="clients-tab">
            <div class="container client-filter">
                <div class="row">
                    <div class="col-md-6">
                        <div class="btn-group">
                            <a href="#new-client-popup" role="button" data-toggle="modal" class="btn btn-primary">
                                <span class="glyphicon glyphicon-plus"></span> New Client</a>
                            <a href="#" role="button" class="btn btn-primary btn-reset-client-list">
                                <span class="glyphicon glyphicon-refresh"></span> Reset Table</a>
                        </div>
                    </div>
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-3">
                        <form class="form-inline" role="form">
                             <div class="input-group">
                                <input type="text" class="form-control" name="search_client" placeholder="Search Client...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <button class="btn btn-default btn-delete-client hide-element" data-toggle="modal" data-target="#delete-client-popup" title="Delete Emploee/s">
                <span class="glyphicon glyphicon-trash"></span> Delete
            </button>
            <div class="table-responsive">
                <table class="table table-bordered table-hover client-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-client"/></th>
                            <th style="width: 15%;">Client Name</th>
                            <th>Address</th>
                            <th style="width: 20%;">Email</th>
                            <th style="width: 10%;">Contact No.</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>  
                </table>
            </div>
            <!--New Client Modal-->
            <div class="modal fade" id="new-client-popup" tabindex="-1" role="dialog" aria-labelledby="new-client" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="new-client">New Client</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="n-lname" class="control-label">Last Name</label>
                                    <input type="text" name="lname" class="form-control lname required" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="n-fname" class="control-label">First Name</label>
                                    <input type="text" name="fname" class="form-control fname required" />
                                </div>
                            </div>
                            <div class="col-sm-12 address-container">
                                <label for="n-address" class="control-label">Address</label>
                                <a href="#" class="another-address">Add row</a>
                                <input type="text" class="form-control address-text address-1 required-info" name="address">
                            </div>
                            <div class="col-sm-12 email-container">
                                <label for="n-email" class="control-label">Email Address</label>
                                <a href="#" class="another-email">Add row</a>
                                <input type="text" class="form-control email-text email-1 required-info" name="email">
                            </div>
                            <div class="col-sm-12 contact-no-container">
                                <label for="n-contact-no" class="control-label">Contact No.</label>
                                <a href="#" class="another-contact-no">Add row</a>
                                <input type="text" class="form-control contact-no-text contact-no-1 required-info" name="contact-no">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-save">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--View Client Modal-->
            <div class="modal fade" id="view-client-popup" tabindex="-1" role="dialog" aria-labelledby="view-client" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="view-client">View Client</h4>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="client_id" id="client-id" />
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="v-lname" class="control-label">Last Name</label>
                                    <input type="text" name="lname" class="form-control lname required" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="v-fname" class="control-label">First Name</label>
                                    <input type="text" name="fname" class="form-control fname required" />
                                </div>
                            </div>
                            <div class="col-sm-12 address-container">
                                <label for="v-address" class="control-label">Address</label>
                                <a href="#" class="another-address">Add row</a>
                            </div>
                            <div class="col-sm-12 email-container">
                                <label for="v-email" class="control-label">Email Address</label>
                                <a href="#" class="another-email">Add row</a>
                            </div>
                            <div class="col-sm-12 contact-no-container">
                                <label for="v-contact-no" class="control-label">Contact No.</label>
                                <a href="#" class="another-contact-no">Add row.</a>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-update">Update</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Delete Client Modal-->
            <div class="modal fade" id="delete-client-popup" tabindex="-1" role="dialog" aria-labelledby="delete-client" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-client">Delete Client/s</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
        </div>
        <!--Supplier-->
        <div class="tab-pane" id="supplier-tab">
            <div class="container supplier-filter">
                <div class="row">
                    <div class="col-md-6">
                        <div class="btn-group">
                            <a href="#new-supplier-popup" role="button" data-toggle="modal" class="btn btn-primary">
                                <span class="glyphicon glyphicon-plus"></span> New Supplier</a>
                            <a href="#" role="button" class="btn btn-primary btn-reset-client-list">
                                <span class="glyphicon glyphicon-refresh"></span> Reset Table</a>
                        </div>
                    </div>
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-3">
                        <form class="form-inline" role="form">
                             <div class="input-group">
                                <input type="text" class="form-control" name="search_supplier" placeholder="Search Supplier...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <button class="btn btn-default btn-delete-supplier hide-element" data-toggle="modal" data-target="#delete-supplier-popup" title="Delete Emploee/s">
                <span class="glyphicon glyphicon-trash"></span> Delete
            </button>
            <div class="table-responsive">
                <table class="table table-bordered table-hover supplier-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-supplier"/></th>
                            <th style="width: 12%;">Company Name</th>
                            <th style="width: 15%;">Contact Person</th>
                            <th style="width: 15%;">Service</th>
                            <th>Address</th>
                            <th style="width: 15%;">Email</th>
                            <th style="width: 10%;">Contact No.</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>  
                </table>
            </div>
            <!--New Supplier Modal-->
            <div class="modal fade" id="new-supplier-popup" tabindex="-1" role="dialog" aria-labelledby="new-supplier" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="new-supplier">New Supplier</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="n-company" class="control-label">Company Name</label>
                                    <input type="text" name="lname" class="form-control cname required" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="n-contact-person" class="control-label">Contact Person</label>
                                    <input type="text" name="fname" class="form-control contact-person required" />
                                </div>
                            </div>
                            <div class="col-sm-12 services-container">
                                <label for="n-address" class="control-label">Services</label>
                                <a href="#" class="another-services">Add row</a>
                                <input type="text" class="form-control services-text services-1 required-info" name="address">
                            </div>
                            <div class="col-sm-12 address-container">
                                <label for="n-address" class="control-label">Address</label>
                                <a href="#" class="another-address">Add row</a>
                                <input type="text" class="form-control address-text address-1 required-info" name="address">
                            </div>
                            <div class="col-sm-12 email-container">
                                <label for="n-email" class="control-label">Email Address</label>
                                <a href="#" class="another-email">Add row</a>
                                <input type="text" class="form-control email-text email-1 required-info" name="email">
                            </div>
                            <div class="col-sm-12 contact-no-container">
                                <label for="n-contact-no" class="control-label">Contact No.</label>
                                <a href="#" class="another-contact-no">Add row</a>
                                <input type="text" class="form-control contact-no-text contact-no-1 required-info" name="contact-no">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-save">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--View Supplier Modal-->
            <div class="modal fade" id="view-supplier-popup" tabindex="-1" role="dialog" aria-labelledby="view-supplier" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="view-supplier">View Supplier</h4>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="supplier_id" id="supplier-id" />
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="v-lname" class="control-label">Company Name</label>
                                    <input type="text" name="lname" class="form-control cname required" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="v-fname" class="control-label">Contact Person</label>
                                    <input type="text" name="fname" class="form-control contact-person required" />
                                </div>
                            </div>
                            <div class="col-sm-12 services-container">
                                <label for="v-services" class="control-label">Services</label>
                                <a href="#" class="another-services">Add row</a>
                            </div>
                            <div class="col-sm-12 address-container">
                                <label for="v-address" class="control-label">Address</label>
                                <a href="#" class="another-address">Add row</a>
                            </div>
                            <div class="col-sm-12 email-container">
                                <label for="v-email" class="control-label">Email Address</label>
                                <a href="#" class="another-email">Add row</a>
                            </div>
                            <div class="col-sm-12 contact-no-container">
                                <label for="v-contact-no" class="control-label">Contact No.</label>
                                <a href="#" class="another-contact-no">Add row</a>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-update">Update</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Delete Supplier Modal-->
            <div class="modal fade" id="delete-supplier-popup" tabindex="-1" role="dialog" aria-labelledby="delete-supplier" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-supplier">Delete Supplier</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>
